// 意见反馈
<template>
  <div class="problem-feedback">
    <!-- 头部导航栏 -->
    <navigation-bar>
      <template>
        <img src="@/assets/img/logo.svg" alt />
      </template>
    </navigation-bar>
    <!-- 帮助中心头部 -->
    <public-header :imgUrl="backgroundImg">
      <h1>意见与反馈</h1>
      <p>首页/ 意见反馈</p>
    </public-header>
    <!-- 反馈意见内容 -->
    <div class="main-form">
      <div class="img-title">
        <img src="@/assets/img/help_center/反馈建议.svg" />
        <div class="title">
          <h5>反馈与建议</h5>
          <p>我们的成长离不开您的参与</p>
        </div>
      </div>
      <div class="form">
        <el-form ref="form" :rules="rules" :model="form">
          <el-form-item>
            <el-input type="textarea" v-model="form.text" placeholder="请输入您的需要、意见与建议"></el-input>
          </el-form-item>
          <h3>请留下您的联系方式，方便客服人员跟您联系</h3>
          <el-form-item label="姓名" prop="name">
            <el-input placeholder="请输入您的名字" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="iphone">
            <el-input placeholder="请输入您的手机" v-model="form.iphone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input placeholder="请输入您的邮箱" v-model="form.email"></el-input>
          </el-form-item>
        </el-form>
        <el-button id="button-sub" @click="submit('form')">提交</el-button>
      </div>
    </div>

    <!-- 引入底部链接组件 -->
    <footer-link></footer-link>
  </div>
</template>
<script>
export default {
  name: "ProblemFeedback",
  data() {
    return {
      backgroundImg: require("@/assets/img/help_center/意见反馈.jpg"), //头部背景图片地址,
      form: {
        text: "",
        name: "",
        iphone: "",
        email: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" }
        ],
        iphone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 6 到 11 个字符", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 3 到 16 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 提交表单
    submit(refName) {
      this.$refs[refName].validate(valid => {
        if (valid) {
          alert("提交成功!");
          this.form = {
            text: "",
            name: "",
            iphone: "",
            email: ""
          };
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.problem-feedback {
  color: black;
  width: 100%;
  .main-form {
    box-sizing: border-box;
    width: 100%;
    height: 900px;
    padding: 100px 400px 200px 200px;
    .img-title {
      display: flex;
      .title {
        margin-left: 20px;
        h5 {
          font-size: 24px;
        }
        p {
          font-size: 14px;
          color: #666666;
        }
      }
    }
  }
}
</style>
<style lang="scss" >
.problem-feedback {
  .form {
    .el-form {
      .el-form-item__content {
        .el-textarea__inner {
          margin-top: 20px;
          height: 215px;
        }
      }

      .is-required {
        margin-top: 40px;
        display: flex;
        .el-input__inner {
          width: 410px;
        }
      }
    }
  }

  #button-sub {
    width: 410px;
    margin-left: 50px;
    background-color: #4f7bd9;
    color: #fff;
  }
}
</style>